<!-- 小食 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="icon"  href="/img/蛋糕.svg" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>面包</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            text-decoration: none;
        }

        /* 导航栏 */
        .header {
            position: absolute;
            width: 100%;
            background: #FFFFFF;
            border-bottom: 1px solid #e8e8e8;
            display: flex;
            justify-content: space-between;
            position: fixed;
            z-index: 100;
        }

        .header a {
            color: #969696;
        }

        .header a:hover {
            color: black;
        }

        .header span {
            color: #969696;
        }

        .header-left {
            display: flex;
            float: left;
            height: 70px;

        }

        .snacks {
            width: 90px;
            height: 42px;
            float: left;
            padding-top: 25px;

            border-right: 1px solid #e8e8e8;

        }

        .location,
        .products,
        .home,
        .cakes,
        .breads,
        .bds {
            width: 90px;
            height: 45px;
            float: left;
            padding-top: 25px;
            border-right: 1px solid #e8e8e8;
        }

        .location,
        .products,
        .home,
        .cakes,
        .breads,
        .snacks,
        .bds,
        .location div span,
        .head-span {
            width: 90px;
            display: inline-block;
            text-align: center;
            font-size: 15px;
        }

        .header-right {
            float: right;
            width: 270px;
            height: 70px;
            display: flex;

        }

        .head-span,
        .mycar,
        .activity {
            width: 90px;
            height: 45px;
            border-left: 1px solid #e8e8e8;
            font-size: 15px;
            padding-top: 25px;
        }

        .zhuce,
        .login {
            width: 30px;
            height: 17px;

        }

        .car {
            width: 18px;
            height: 20px;
            margin-left: 36px;

        }

        .icon2 {
            width: 23px;
            height: 13px;
            margin-left: 33.5px;
        }

        .header-left div a span:hover {
            color: black;
        }

        .header-left div:hover {
            border-top: 3px #ffe32a solid;
            color: black;
        }

        a {
            text-decoration: none;
            color: black;
        }

        /* 蛋糕列表 */
        .list-content {
            width: 100%;
            display: flex;
            padding-top: 80px;
            padding-bottom: 30px;
            background: #f5f5f5;
            border-top: 1px solid #e8e8e8;
        }

        .list-box {
            width: 1280px;
            /* border: 1px solid red; */
            margin: 0 auto;
        }

        .item {
            width: 320px;
            height: 412px;
            float: left;
            padding-top: 20px;
            text-align: center;
            /* border: 1px solid red; */
        }

        .item-list img {
            width: 289px;
            height: 289px;
        }

        .item h3 {
            width: 320px;
            height: 20px;
            font-weight: initial;
            font-size: 15px;
            margin-bottom: 6px;
            color: #000;
        }

        .item p {
            width: 320px;
            height: 50px;
            margin-top: 20px;
            /* border: 1px solid red; */
        }

        .car1 {
            width: 32px;
            height: 32px;
            margin-left: 13px;
            vertical-align: middle;
            /* border: 1px solid red; */
        }

        .price {
            width: 60px;
            height: 20px;
            display: inline-block;
            font-size: 18px;
            color: #000;
            /* border: 1px solid red; */
        }

        /* 底部 */
        .footer {
            width: 100%;
            padding-bottom: 30px;
            background: #000;
        }

        .footer a {
            color: #9c9c9c;
        }

        .footer h3 {
            color: #ebebeb;
            font-size: 16px;
            margin-bottom: 20px;
        }

        .footer-cont {
            width: 1250px;
            height: 229px;
            display: flex;
            padding-top: 70px;
            margin: 0 auto;
            /* border: 1px solid red; */
        }

        .footer-left {
            width: 320px;
            height: 229px;
            padding-left: 100px;
            float: left;
        }

        .left-p {
            margin-bottom: 100px;
            margin-top: 26px;
        }

        .left-p p {
            font-size: 12px;
            color: #9c9c9c;
            margin-bottom: 6px;
        }

        .footer-right {
            width: 800px;
            float: left;
            margin-left: 60px;
            /* border: 1px solid red; */
        }

        .footer-right p {
            font-size: 12px;
            color: #9c9c9c;
            margin-bottom: 6px;
        }

        .footer-right div {
            float: left;
        }

        .help,
        .find {
            margin-left: 58px;
            margin-left: 58px;
        }

        .wei {
            width: 250px;
            margin-left: 76px;
            /* border: 1px solid red; */
        }

        .wei img {
            margin-left: 20px;
            float: right;
        }

        .footer-bottom {
            width: 1250px;
            height: 176px;
            margin-left: 134px;
            display: flex;
            margin: 0 auto;
            /* justify-content: space-between; */
            font-size: 12px;
            color: #9c9c9c;
            /* border: 1px solid red; */
        }

        .footer-bottom p {
            margin-bottom: 8px;
        }

        .bot-p1 {
            width: 240px;
            margin-top: 30px;
            margin-left: 100px;
            /* border: 1px solid red; */
        }

        .bot-p2 {
            width: 360px;
            margin-top: 30px;
            margin-left: 100px;
            /* border: 1px solid red; */
        }

        .bot-p3 {
            width: 340px;
            margin-top: 30px;
            margin-left: 100px;
            /* border: 1px solid red; */
        }

        .copyright {
            width: 1250px;
            height: 16px;
            margin: 0 auto;
            margin-top: 20px;
            text-align: center;
            /* border: 1px solid red; */
            font-size: 12px;
            color: #9c9c9c;
        }
    </style>
</head>

<body>
    <div class="header">
        <div class="header-left">
            <div class="logo" style="border-top: 0px;">
                <img src=" ./img/logo.png" alt="">
            </div>
            <div class="location" style="border-top: 0;">
                <a href="#">
                    <span>上海市</span>
                </a>
            </div>
            <div class="products">
                <a href="#">
                    <span>所有产品</span>
                </a>
            </div>
            <div class="home">
                <a href="././sy/cookie.html">
                    <span>首页</span>
                </a>
            </div>
            <div class="cakes">
                <a href="cake.html">
                    <span>蛋糕</span>
                </a>
            </div>
            <div class="breads" style="border-top: 3px #ffe32a solid;">
                <a href="./mb.html">
                    <span style="color: black;">面包</span>
                </a>
            </div>
            <div class="snacks">
                <a href="snack.html">
                    <span>小食</span>
                </a>
            </div>
            <div class="bds">
                <a href="test.html">
                    <span>企业专区</span>
                </a>
            </div>
        </div>
        <div class="header-right">
            <div class="login-header">
                <span class="head-span">
                    <a href="register.html">
                        <span class="zhuce">注册</span>
                    </a>
                    &nbsp;|&nbsp;
                    <a href="Login.html">
                        <span class="login">登录</span>
                    </a>
                </span>
            </div>
            <div class="mycar">
                <a href="./ShoppingCart.html">
                    <img class="car" src="./img/bag1.png" alt="">
                </a>

            </div>
            <div class="activity">
                <a href="">
                    <img class="icon2" src="./img/icon02.png" alt="">
                </a>

            </div>
        </div>
    </div>
    <div class="list-content">
        <div class="list-box">
            <div class="list-ul">
                <div class="item">
                    <a href="#">
                        <div class="item-list">
                            <img src="./img/面包1.jpg" alt="">
                        </div>
                        <h3>芋泥糯糬</h3>
                    </a>
                    <p>
                        <span class="price">
                            ￥28.00
                        </span>
                        <img class="car1" src="./img/car1.png" alt="">
                    </p>
                </div>
                <div class="item">
                    <a href="#">
                        <div class="item-list">
                            <img src="./img/面包2.jpg" alt="">
                        </div>
                        <h3>亚麻籽车打咸芝士</h3>
                    </a>
                    <p>
                        <span class="price">
                            ￥28.00
                        </span>
                        <img class="car1" src="./img/car1.png" alt="">
                    </p>
                </div>
                <div class="item">
                    <a href="#">
                        <div class="item-list">
                            <img src="./img/面包3.jpg" alt="">
                        </div>
                        <h3>全麦威尼斯</h3>
                    </a>
                    <p>
                        <span class="price">
                            ￥26.00
                        </span>
                        <img class="car1" src="./img/car1.png" alt="">
                    </p>
                </div>
                <div class="item">
                    <a href="#">
                        <div class="item-list">
                            <img src="./img/面包4.jpg" alt="">
                        </div>
                        <h3>芝士贝果(4枚装)</h3>
                    </a>
                    <p>
                        <span class="price">
                            ￥48.00
                        </span>
                        <img class="car1" src="./img/car1.png" alt="">
                    </p>
                </div>
                <div class="item">
                    <a href="#">
                        <div class="item-list">
                            <img src="./img/面包5.jpg" alt="">
                        </div>
                        <h3>红茶奶酥</h3>
                    </a>
                    <p>
                        <span class="price">
                            ￥28.00
                        </span>
                        <img class="car1" src="./img/car1.png" alt="">
                    </p>
                </div>
                <div class="item">
                    <a href="#">
                        <div class="item-list">
                            <img src="./img/面包6.jpg" alt="">
                        </div>
                        <h3>全麦吐司（10片薄切）</h3>
                    </a>
                    <p>
                        <span class="price">
                            ￥20.00
                        </span>
                        <img class="car1" src="./img/car1.png" alt="">
                    </p>
                </div>
                <div class="item">
                    <a href="#">
                        <div class="item-list">
                            <img src="./img/面包7.jpg" alt="">
                        </div>
                        <h3>黑眼豆豆（5个装）</h3>
                    </a>
                    <p>
                        <span class="price">
                            ￥22.00
                        </span>
                        <img class="car1" src="./img/car1.png" alt="">
                    </p>
                </div>
                <div class="item">
                    <a href="#">
                        <div class="item-list">
                            <img src="./img/面包8.jpg" alt="">
                        </div>
                        <h3>佐莫拉吉</h3>
                    </a>
                    <p>
                        <span class="price">
                            ￥24.00
                        </span>
                        <img class="car1" src="./img/car1.png" alt="">
                    </p>
                </div>
                <div class="item">
                    <a href="#">
                        <div class="item-list">
                            <img src="./img/面包9.jpg" alt="">
                        </div>
                        <h3>肉桂苹果</h3>
                    </a>
                    <p>
                        <span class="price">
                            ￥22.00
                        </span>
                        <img class="car1" src="./img/car1.png" alt="">
                    </p>
                </div>
                <div class="item">
                    <a href="#">
                        <div class="item-list">
                            <img src="./img/面包10.jpg" alt="">
                        </div>
                        <h3>高纤奶酪plus</h3>
                    </a>
                    <p>
                        <span class="price">
                            ￥30.00
                        </span>
                        <img class="car1" src="./img/car1.png" alt="">
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="footer-cont">
            <div class="footer-left">
                <div class="foot-logo">
                    <img src="./img/logo1.png" alt="">
                    <div class="left-p">
                        <p>订购热线：4006-678-678（8:00 - 20:00)</p>
                        <p>客服邮箱：cs@mcake.com</p>
                        <p>地址：上海市普陀区同普路1130弄3号楼</p>
                        <p><a href=#>食品生产许可证：SC12431010700121</a></p>
                    </div>
                </div>
            </div>
            <div class="footer-right">
                <div class="about">
                    <h3>关于我们</h3>
                    <p>
                        <a href="#">企业介绍</a>
                    </p>
                    <p>
                        <a href="#">媒体合作</a>
                    </p>
                    <p>
                        <a href="#">招贤纳士</a>
                    </p>
                    <p>
                        <a href="#">呼叫中心</a>
                    </p>
                </div>
                <div class="help">
                    <h3>帮助中心</h3>
                    <p>
                        <a href="#">投诉与建议</a>
                    </p>
                    <p>
                        <a href="#">会员权益</a>
                    </p>
                    <p>
                        <a href="#">购物指南</a>
                    </p>
                    <p>
                        <a href="#">支付类</a>
                    </p>
                    <p>
                        <a href="#">订单相关</a>
                    </p>
                    <p>
                        <a href="#">配送服务</a>
                    </p>
                </div>
                <div class="find">
                    <h3>发现</h3>
                    <p>
                        <a href="#">公告</a>
                    </p>
                </div>
                <div class="wei">
                    <img src="./img/weixin.png" alt="">
                    <a href="#">
                        <img src="./img/weibo.png" alt="">
                    </a>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <div class="bot-p1">
                <p>上海卡法电子商务有限公司</p>
                <p>地址：上海市普陀区同普路1130弄3号楼</p>
                <p>洽谈电话：021-52691591</p>
                <p class="gov-p">
                    <a href="#">社会信用代码：913101070678091460</a>
                </p>
                <p class="gov-p">
                    <a href="#">食品经营许可证：JY13101070034251</a>
                </p>
            </div>
            <div class="bot-p2">
                <p>上海卡法电子商务有限公司北京分公司</p>
                <p>地址：北京市朝阳区望京西路甲50号1号楼6层1-08内606单元</p>
                <p>洽谈电话：010-64720188</p>
                <p class="gov-p">
                    <a href="#">社会信用代码：911101053484280752</a>
                </p>
                <p class="gov-p">
                    <a href="#">食品经营许可证：JY11105262932938</a>
                </p>
            </div>
            <div class="bot-p3">
                <p>上海卡法电子商务有限公司杭州分公司</p>
                <p>地址：杭州市拱墅区朝晖路179号嘉汇大厦2号楼25-1室</p>
                <p>洽谈电话：0571-28103688</p>
                <p class="gov-p">
                    <a href="#">社会信用代码：913301060920344424</a>
                </p>
                <p class="gov-p">
                    <a href="#">食品经营许可证：JY13301050141226</a>
                </p>
            </div>

        </div>
        <p class="copyright">
            Copyright © 2012-2023 上海卡法电子商务有限公司 版权所有 l <沪ICP备12022075号 href="#">沪ICP备12022075号</a>
                l
                <a href="#">沪公网安备31010702005582号</a>
        </p>
    </div>
</body>

</html>